<template>
  <div class="baseEchart">
    <div
      ref="echartsEchartRef"
      :style="{ width: props.width, height: props.height }"
    ></div>
  </div>
</template>

<script setup>
import { ref, onMounted, defineProps, watchEffect } from "vue";
import userEcharts from "../hooks/useEcharts";

const props = defineProps({
  width: {
    type: String,
    default: "100%",
  },
  height: {
    type: String,
    default: "280px",
  },
  options: {
    type: Array,
  },
});
const echartsEchartRef = ref(null);
onMounted(() => {
  const { echartInstance, setOptions } = userEcharts(echartsEchartRef.value);
  setOptions(props.options);
  watchEffect(() => {
    setOptions(props.options);
  });
});
</script>

<style lang="scss" scope>
.baseEchart {
  &_body {
    width: 500px;
    height: 500px;
  }
}
</style>
